$(function () {
    let cloumn, tag, num = $(".get").val(), temp = 0;
    let url = 'http://127.0.0.1:8000/';
    let url1 = "http://127.0.0.1:8000/";

    num = $(".get").val();
    requestdata(url, num, "get");

    $(document).on("click", ".page", function () {
        $(".page").removeClass("active");
        $(this).addClass("active");
        let clickpage = $(this).text();
        num = $(".get").val();
        requestdata(url, num, "get", clickpage, false);
        $(".nowpage").text(clickpage);
    });

    $(document).on("click", ".last-page", function () {
        let page = $(".active").text();
        if (page === '1') {
            hint("已是第一页!");
        } else {
            page--;
            let thispage = $(".active");
            thispage.removeClass("active");
            let prepage = thispage.prev();
            prepage.addClass("active");
            num = $(".get").val();
            requestdata(url, num, "get", page, false);
            $(".nowpage").text(page);
        }
    });

    $(document).on("click", ".next-page", function () {
        let page = $(".active").text();
        let acount_page = $(".pagez").text();
        if (page === (acount_page).toString()) {

            hint("已是最后一页");
        } else {
            page++;
            let thispage = $(".active");
            thispage.removeClass("active");
            let nextpage = thispage.next();
            nextpage.addClass("active");
            num = $(".get").val();
            requestdata(url, num, "get", page, false);
            $(".nowpage").text(page);
        }
        console.log(acount_page, page);
    });

    $(document).on("click", ".update", function () {
        $(".xg-content").addClass("block");
    });

    $(document).on("click", ".delete", function () {
        temp = $(this).parent().prev().prev().prev().attr('data-id');
        $(".detele-content").addClass("block");
    });

    $(document).on("click", ".detele-btn", function () {
        $(".xg-content").removeClass("block");
    });

    $(document).on("click", ".del-del", function () {
        $(".detele-content").removeClass("block");
    });

    $(document).on("click", ".add", function () {
        $(".add-content").addClass("block");
        $(".lable1>input").val("");
        num = $(".get").val();
        $(".change1>option").each(function () {
            if ($(this).val() === num) {
                $(this).attr("selected", true);
            }
        });
    });

    $(document).on("click", ".add-btn", function () {
        $(".add-content").removeClass("block");
    });

    $(document).on("click", ".del-sure", function () {
        console.log(temp);

        $.ajax({
            type: 'delete',
            url: url1 + "deletelabel/" + temp,
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data.code === 200) {

                    hint("删除成功");
                    num = $(".get").val();
                    requestdata(url, num, "get");
                } else {
                    hint("删除失败");
                }
            }
        });
        $(".detele-content").removeClass("block");
    });
    //修改小标签
    $(document).on("click", ".modify", function () {
        cloumn = $(".change").val();
        tag = $(".lable>input").val();

        $.ajax({
            type: 'POST',
            url: url1 + "modifylabel",
            dataType: "json",
            data: {
                title: tag,
                ColumnID: cloumn,
                id: temp
            },
            success: function (data) {
                if (data.code === 200) {
                    hint("修改成功");
                    num = $(".get").val();
                    requestdata(url, num, "get");
                } else {
                    hint("修改失败")
                }
            }
        });

        $(".xg-content").removeClass("block");
    });
    //添加小标签
    $(document).on("click", ".add-sure", function () {
        let cloumn = $(".change1").val();
        let tag = $(".lable1 input").val();


        $.ajax({
            type: 'POST',
            url: url1 + "addtags",
            dataType: "json",
            data: {
                title: tag,
                ColumnID: cloumn
            },
            success: function (data) {
                if (data.code === 200) {
                    hint("添加成功");
                    num = $(".get").val();
                    requestdata(url, num, "get");
                } else {
                    hint("添加失败");
                }
            }
        });

        $(".lable1 input").empty();
        $(".add-content").removeClass("block");
    });


    $(document).on("click", ".update", function () {
        temp = $(this).parent().prev().prev().prev().attr('data-id');
        // console.log(s);
        let cloumn = $(this).parents("ul").find("li").eq(1).html();
        let tag = $(this).parents("ul").find("li").eq(2).html();

        $(".change option").each(function () {
            if ($(this).text() === cloumn) {
                $(this).attr("selected", true);
            }
        });
        $(".lable input").val(tag);
    });

    $(".get").change(function () {
        num = $(".get").val();
        $(".nowpage").text(1);
        requestdata(url, num, "get");
    });
});


function requestdata(url, num, type_status, page, bool) {
    if (bool === undefined) {
        getpage(url, num);
    }
    let url_temp;
    if (page === undefined) {
        url_temp = url + num;
    } else {
        url_temp = url + num + '?page=' + page;
    }
    $.ajax({
        type: type_status,
        url: url_temp,
        dataType: "json",
        success: function (data) {
            console.log(data);
            if (data.code === 200) {
                $(".Rotation-set").empty();
                let this_pages = data.data.current_page;
                let $li = `<ul>
                    <li>编号</li>
                    <li>专栏</li>
                    <li>标签</li>
                    <li>操作</li>
                    </ul>`;
                $(data.data.data).each(function (index, item) {
                    $li += `<ul>
                        <li data-id="${item.id}">${(index) + (this_pages - 1) * 5 + 1}</li>
                        <li>${item.column_name}</li>
                        <li>${item.tag_name}</li>
                        <li>
                        <span class="update">修改</span>
                        <span class="delete">删除</span>
                        </li>
                        </ul>`;
                });
                $(".Rotation-set").append($li);
            } else {
                hint("请求失败");
            }
        }
    });
}

function getpage(url, num) {
    let pages;
    $.ajax({
        type: 'get',
        url: url + num,
        dataType: 'json',
        success: function (data) {
            if (data.code === 200) {
                pages = data.data.last_page;
                $(".page").remove();
                for (let i = 1; i <= pages; i++) {
                    let page = `<div class="page pp">${i}</div>`;
                    $(".pp").last().after(page);
                }
                $(".page").eq(0).addClass("active");
                $(".page").css("display", "block");
                $(".pagez").text(pages);
                // show();
            } else {
                hint("分页失败");
            }
        }
    });
}

function show() {
    $(".page").css("display", "none");
    let show = parseInt($(".nowpage").text());
    let show2 = show;
    for (show2; show2 < show + 4; show2++) {
        $(".page").eq(show2 - 1).css("display", "block")
    }
}

var layer = document.createElement("div");
layer.id = "layer";

function hint(text) {
    var style =
        {
            background: "#FDEBD0",
            position: "fixed",
            right: "2%",
            top: "2%",
            zIndex: 10,
            width: "10%",
            height: "5%",
            border: "1px solid #ECF0F1",
            text_align: "center"
        };
    for (var i in style)
        layer.style[i] = style[i];
    if (document.getElementById("layer") == null) {
        document.body.appendChild(layer);
        $('#layer').append(text);
        setTimeout("$('#layer').empty();", 2000);
        setTimeout("document.body.removeChild(layer)", 2000);
    }
}

